import React from 'react';
import { useNavigate } from 'react-router-dom';
import { cn, downloadMuseumArtifactsAsPDF } from '@/lib/utils';
import { museumData } from '@/components/Sidebar';

// 小红书首图组件 - 南京博物院文物教育资料
export default function XiaohongshuCover() {
  const navigate = useNavigate();
  
  // PDF下载功能
  const handleDownloadPDF = () => {
    // 下载当前博物馆的所有文物内容为PDF
    downloadMuseumArtifactsAsPDF('nanjing', '南京博物院');
  };
  
  return (
    <div className="relative w-full max-w-md mx-auto bg-white rounded-3xl shadow-2xl overflow-hidden" id="museum-content">
      {/* 顶部装饰条 */}
      <div className="h-4 bg-gradient-to-r from-blue-500 to-purple-600"></div>
      
      {/* 主视觉区域 */}
      <div className="p-6">
        {/* 标题区域 */}
        <div className="text-center mb-4">
          <span className="inline-block px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-sm font-medium mb-3">
            亲子教育 • 文物学习
          </span>
          <h1 className="text-3xl font-bold text-gray-900 mb-2">南京博物院<br />文物教育资料</h1>
          <p className="text-gray-600 text-lg">专为小学生设计的趣味历史学习包</p>
        </div>
        
        {/* 文物图片展示 */}
        <div className="relative rounded-2xl overflow-hidden mb-6 shadow-lg transform transition-transform hover:scale-[1.02] duration-300">
          <img 
            src="https://lf-code-agent.coze.cn/obj/x-ai-cn/279122722562/attachment/收藏‼️南京博物院18件镇院之宝%20位置&攻略🔥_2_周末去拍照_来自小红书网页版_20250926144310.jpg" 
            alt="南京博物院透雕人鸟兽玉饰件" 
            className="w-full h-64 object-cover"
          />
          {/* 图片位置说明：此图片位于小红书封面页面，其他文物图片可在对应文物详情页查看 */}
          <div className="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent flex items-end">
            <p className="text-white p-4 text-lg font-medium">透雕人鸟兽玉饰件 • 新石器时代</p>
          </div>
        </div>
        
        {/* 特点列表 */}
        <div className="space-y-3 mb-8">
          <div className="flex items-center">
            <div className="w-8 h-8 rounded-full bg-orange-100 flex items-center justify-center mr-3 flex-shrink-0">
              <i className="fa-solid fa-check text-orange-500"></i>
            </div>
            <p className="text-gray-700">8件精选文物详细解析</p>
          </div>
          <div className="flex items-center">
            <div className="w-8 h-8 rounded-full bg-orange-100 flex items-center justify-center mr-3 flex-shrink-0">
              <i className="fa-solid fa-check text-orange-500"></i>
            </div>
            <p className="text-gray-700">亲子互动观察任务设计</p>
          </div>
          <div className="flex items-center">
            <div className="w-8 h-8 rounded-full bg-orange-100 flex items-center justify-center mr-3 flex-shrink-0">
              <i className="fa-solid fa-check text-orange-500"></i>
            </div>
            <p className="text-gray-700">适合打印的A4排版设计</p>
          </div>
        </div>
        
        {/* 行动按钮 */}
         <button 
           onClick={handleDownloadPDF}
           className="w-full bg-gradient-to-r from-blue-500 to-indigo-600 text-white font-bold py-4 px-6 rounded-2xl shadow-lg transform transition-all hover:scale-[1.02] hover:shadow-xl active:scale-[0.98] flex items-center justify-center text-lg"
         >
           <i className="fa-solid fa-file-pdf mr-2"></i> 下载所有文物资料
         </button>
        
        {/* 底部装饰 */}
        <div className="mt-6 text-center text-xs text-gray-400">
          <p>适合6-12岁儿童 | 南京博物院教育项目</p>
        </div>
      </div>
      
      {/* 右侧装饰元素 */}
      <div className="absolute -right-10 top-20 w-24 h-24 bg-orange-100 rounded-full opacity-50 blur-xl"></div>
      <div className="absolute -right-5 bottom-40 w-16 h-16 bg-blue-100 rounded-full opacity-50 blur-lg"></div>
    </div>
  );
}